<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏夹</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="../base.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="favorites.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 导航栏1 -->
        <div class="nav1">
            <ul>
                <li>您好，欢迎您使用禾田裕农资资约购平台</li>
                <li>
                    <a href="../loginPage.html">
                        <i class="fa fa-home"></i>
                        请登录
                    </a>
                </li>
                <li>
                    <a href="../myagriCulturalresources/myagriCulturalresources.html">
                        <i class="fa fa-star-half-o"></i>
                        我的农资
                    </a>
                </li>
                <li>
                    <a href="../shoppingcart/shoppingcart.html">
                        <i class="fa fa-cart-plus"></i>
                        购物车
                    </a>
                </li>
                <li>
                    <a href="favorites.html">
                        <i class="fa fa-folder-o"></i>
                        收藏夹
                    </a>
                </li>
            </ul>
        </div>

        <!-- logo宣传+搜索框 -->
        <div class="logoSearch">
            <div class="logo">
                <img src="logo1.jpeg" alt="" width="265px" height="128px">
                <img src="logo2.png" alt="">
            </div>
            <span class="search">
                <input type="text" placeholder="请输入想搜索的种子、化肥、农资药" class="searchInput">
                <!-- <input type="button" value="搜索"> -->
                <button>搜索</button>
            </span>
        </div>

        <!-- 分类导航栏2 -->
        <div class="nav2">
            <ul>
                <li><a href="../goodsclassifyPage/goodsclassify.html">农资分类</a></li>
                <li><a href="../activityPage/activityPage.html">活动专区</a></li>
                <li><a href="../activityPage/location.html">因地制宜</a></li>
                <li><a href="../agriculturalSciencePopularization/agriculturalSciencePopularization.html">农资业科普</a></li>
                <li><a href="../after-salesService/after-salesService.html">售后服务</a></li>
            </ul>
        </div>

        <!--左分类栏 + 广告轮播 + 快速入口-->
        <div class="serverce">
            <div class="nav3">
                <ul>
                    <li><a href="#"><i class="fa fa-caret-right"></i>种子</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>化肥</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>农药</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>农具</a></li>
                </ul>
            </div>
            <div class="rollwhell">
                <img src="#" alt="">
            </div>
            <div class="quickEnter">
                <a href="#"><img src="pic1.jpg" alt="" width="215px" height="160px"></a>
                <a href="#"><img src="pic2.jpg" alt="" width="215px" height="160px"></a>
            </div>
        </div>
    </div>











    <!-- 主要内容 -->
    <div class="content1" id="content1">
        <!-- 当前页面位置 -->
        <div class="pageLocation">
            <span><i class="fa fa-map-marker fa-lg"></i></span>&nbsp;&nbsp;
            <span>您现在的位置&nbsp;>&nbsp;收藏夹</span>
        </div>
        <div class="table">
            <div class="buttons">
                <button>收藏夹</button>
                <button>降价商品</button>
                <button>库存紧张</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th class="tdone">序号</th>
                        <th class="tdtwo">商品名称</th>
                        <th class="tdthree">数量</th>
                        <th class="tdfour">单价</th>
                        <th class="tdfive">小计</th>
                        <th class="tdsix">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="trclass">
                        <td class="tdone xuhao">1</td>
                        <td class="tdtwo "><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr class="trclass">
                        <td class="tdone xuhao">2</td>
                        <td class="tdtwo"><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr class="trclass">
                        <td class="tdone xuhao">3</td>
                        <td class="tdtwo"><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdone xuhao">4</td>
                        <td class="tdtwo"><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr class="trclass">
                        <td class="tdone xuhao">5</td>
                        <td class="tdtwo"><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr class="trclass">
                        <td class="tdone xuhao">6</td>
                        <td class="tdtwo"><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr class="trclass">
                        <td class="tdone xuhao">7</td>
                        <td class="tdtwo"><img src="pic3.jpg" alt=""><span>西红柿种子</span></td>
                        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span
                                    class="num">0</span><input type="button" value="+"></span></td>
                        <td class="tdfour"><span>单价：</span><span class="unit">150.00</span></td>
                        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
                        <td class="tdsix">
                            <button class="putin">加入购物车</button>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 页面底部 -->
    <div class="footer">
        <div class="foot_nav1">
            <ul>
                <li><i class="fa fa-handshake-o fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;正品质量保证</li>
                <li><i class="fa fa-truck fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;按时配送货物</li>
                <li><i class="fa fa-shield fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;安全支付保障</li>
                <li><i class="fa fa-headphones fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;售后服务守护</li>
            </ul>
        </div>
        <div class="foot_nav2">
            <div class="logo1">
                <img src="logo1.jpeg" alt="" width="200px" height="180px">
            </div>
            <div class="a_navs">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">招商合作</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
                <ul>
                    <li><a href="#">信息查询</a></li>
                    <li><a href="#">农资查询</a></li>
                    <li><a href="#">病害咨询</a></li>
                </ul>
                <ul>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">订单中心</a></li>
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#">退换货政策</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手帮助</a></li>
                    <li><a href="#">新用户注册</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_pic">
            <img src="pic8.jpg" alt="" width="1024px" height="132px">
        </div>
    </div>






    <!-- js -->
    <script>

        window.onload = function () {
            function cart() {
                this.abtn = document.querySelectorAll('input');
                this.ogood_num = document.querySelector('.goods_num');
                this.opricetal = document.querySelector('.pricetal');
                this.opricest = document.querySelector('.pricest');
                this.totalnum = 0;
            };
            //小计:  商品数量 * 商品单价
            cart.prototype.getsubtotal = function (goodsnum, unitprice) {
                return parseInt(goodsnum) * parseFloat(unitprice);
            };
            // 计算商品的总计花费
            cart.prototype.gettotal = function () {
                var asubtotal = document.querySelectorAll('.subtal');
                var res = 0;
                for (var i = 0, len = asubtotal.length; i < len; i++) {
                    res += parseFloat(asubtotal[i].innerHTML);
                };
                return res;
            };
            // 寻找购物车中已经选中的产品的最大单价
            cart.prototype.compareMaxunit = function () {
                var anum = document.querySelectorAll('.num');
                var aunit = document.querySelectorAll('.unit');
                var temp = 0;
                for (var i = 0, len = anum.length; i < len; i++) {
                    if (anum[i].innerHTML != 0) {
                        if (temp < parseFloat(aunit[i].innerHTML)) {
                            temp = parseFloat(aunit[i].innerHTML);
                        }
                    }
                };
                return temp;
            };
            // 点击“+”号按钮触发的购物车商品数量，花费，最大价格的变动
            cart.prototype.minus = function (obtn) {
                var onum = obtn.parentNode.querySelector('.num');
                var n = parseInt(onum.innerHTML);
                onum.innerHTML = ++n;
                this.totalnum++;
                var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');
                var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');
                osubtotal.innerHTML = this.getsubtotal(onum.innerHTML, oUnit.innerHTML);
                this.ogood_num.innerHTML = this.totalnum;
                this.opricetal.innerHTML = this.gettotal();
                this.opricest.innerHTML = this.compareMaxunit();
            };
            // 点击“-”号按钮触发的购物车商品数量，花费，最大价格的变动
            cart.prototype.plus = function (obtn) {
                var onum = obtn.parentNode.querySelector('.num');
                if (parseInt(onum.innerHTML) > 0) {
                    var n = parseInt(onum.innerHTML);
                    onum.innerHTML = --n;
                    this.totalnum--;
                    var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');
                    var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');
                    osubtotal.innerHTML = this.getsubtotal(onum.innerHTML, oUnit.innerHTML);
                    this.ogood_num.innerHTML = this.totalnum;
                    this.opricetal.innerHTML = this.gettotal();
                    this.opricest.innerHTML = this.compareMaxunit();
                }
            };
            // 获取已买商品的总计数量
            cart.prototype.getNumbertal = function () {
                var anum = document.querySelectorAll('.num');
                var res_num = 0;
                for (var i = 0; i < anum.length; i++) {
                    res_num += parseInt(anum[i].innerHTML);
                }
                return res_num;
            }
            // 删除按钮触发的购物车商品数量，花费，最大价格的变动
            cart.prototype.del = function (obtn) {
                var odel = obtn.parentNode.parentNode;
                var oparent = odel.parentNode;
                oparent.removeChild(odel);
                this.ogood_num.innerHTML = this.getNumbertal();
                this.opricetal.innerHTML = this.gettotal();
                this.opricest.innerHTML = this.compareMaxunit();
                this.xuhaosort();
            }
            // 购物车序号重新排序
            cart.prototype.xuhaosort = function () {
                var axuhao = document.querySelectorAll('.xuhao');
                for (var i = 0, len = axuhao.length; i < len; i++) {
                    axuhao[i].innerHTML = i + 1;
                }
            }
            // 绑定“+”，“-”，删除按钮的点击事件
            cart.prototype.bind = function () {
                var that = this;
                for (var i = 0; i < this.abtn.length; i++) {
                    if (i % 2 != 0) {
                        this.abtn[i].onclick = function () {
                            that.plus(this);
                        }
                    } else {
                        this.abtn[i].onclick = function () {
                            that.minus(this);
                        }
                    }
                };
                var delbtn = document.querySelectorAll('.del');
                for (var i = 0; i < delbtn.length; i++) {
                    delbtn[i].onclick = function () {
                        that.del(this);
                    }
                }
            };
            var oCart = new cart();
            oCart.bind();
        }

    
    </script>
</body>

</html>